import React from "react";
import { Link, Outlet } from "react-router-dom";

import "./App.css"
import {permits} from "./data"

export default function App() {
  const list = JSON.parse(JSON.stringify(permits))
  const topMenuData = list.find(p=>p.parentId===0)
  //console.log(list, topMenuData);

  const menus = ()=>{
    generator(topMenuData, list)
    return <ul>{topMenuData.ui}</ul>
  }

  const generator = (p, list)=>{
    const childs = list.filter(c=>c.parentId===p.id)
    const name = p.path.substring(p.path.lastIndexOf("/")+1)

    if(childs && childs.length>0){
      const children = []
      childs.forEach(c => {
        generator(c, list)
        children.push(c.ui)
      });
      if (p.parentId !== 0) {
        //p.ui = <li key={p.id}><a href="#">{name}</a><ul>{children}</ul></li>
        p.ui = <li key={p.id}><Link to={p.path}>{name}</Link><ul>{children}</ul></li>
      }else{
        p.ui = <>{children}</>
      }
    }else{
      //p.ui = <li key={p.id}><a href="#">{name}</a></li>
      p.ui = <li key={p.id}><Link to={p.path}>{name}</Link></li>
    }
  }

  return (
    <div>
      <h2>hello router</h2>
      <nav>
        {menus()}
      </nav>
    </div>
  );
}